<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">
*{margin: 0;padding: 0;}
div{
	background: url(李博.jpg);
}


    </style> 
</head>
<body>
<script type="text/javascript">
	

	for(var i =0;i<10;i++){
		for(var j = 0;j<10;j++){
			var oDiv = document.createElement('div');
			oDiv.style.width = '50px';
			oDiv.style.height = '50px';
			//oDiv.style.background ='black';
			oDiv.style.position = 'absolute';
			oDiv.style.backgroundPosition =-j*50+'px '+(-i*50)+'px';
			oDiv.style.left = 50 * j +'px';

			//j = 0;  0
			//j = 1; 50
			//j = 2; 100
			//j = 9; 450
			oDiv.style.top = 50 * i + 'px';
			//i = 0; 0
			//i = 0
			//...
			//i = 0 0
			//i = 1 50
			//i -2
			oDiv.style.border = '1px solid white';
			oDiv.style.opacity = '0';
			oDiv.onmouseover = function(){
				this.style.opacity = '1';
			}
			document.body.appendChild(oDiv);
		};
	};
	//alert(document.getElementsByTagName('div').length)//
</script>
</body>
</html>